{% block sw_product_detail_base %}
<div class="sw-product-detail-base">
    <template v-if="isLoading">
        <sw-skeleton variant="detail-bold" />
        <sw-skeleton />
    </template>

    <template v-else>
        {% block sw_product_detail_base_basic_info_card %}
        <mt-card
            v-show="showProductCard('general_information')"
            class="sw-product-detail-base__info"
            position-identifier="sw-product-detail-base-info"
            :title="$tc('sw-product.detailBase.cardTitleProductInfo')"
        >

            {% block sw_product_detail_base_basic_info_form %}
            <sw-product-basic-form
                :show-settings-information="showModeSetting"
                :allow-edit="acl.can('product.editor')"
            />
            {% endblock %}

        </mt-card>
        {% endblock %}

        <mt-card
            v-if="productStates.includes('is-download')"
            class="sw-product-detail-base__downloads"
            :subtitle="$tc('sw-product.detailBase.cardSubtitleDownloads')"
            :is-loading="loading.product || loading.customFieldSets || loading.downloads"
            position-identifier="sw-product-detail-base-downloads"
        >
            <template #title>
                <div class="sw-card__title">
                    {{ $tc('sw-product.detailBase.cardTitleDownloads') }}
                </div>
            </template>

            <sw-product-download-form
                v-if="mediaFormVisible"
                :product-id="product.id"
                :label="$tc('sw-product.detailBase.downloadsLabel')"
                :disabled="!acl.can('product.editor')"
                required
                @media-open="onOpenDownloadMediaModal"
            />
        </mt-card>

        {% block sw_product_detail_base_price_card %}
        <mt-card
            v-show="showProductCard('prices')"
            class="sw-product-detail-base__prices"
            position-identifier="sw-product-detail-base-prices"
            :title="$tc('sw-product.detailBase.cardTitlePrices')"
            :is-loading="loading.product"
        >

            {% block sw_product_detail_base_price_form %}
            <sw-product-price-form :allow-edit="acl.can('product.editor')" />
            {% endblock %}

            {% block sw_product_detail_base_advanced_prices_link %}
            <sw-container
                v-if="productId"
                columns="1fr"
                justify="end"
            >

                <router-link
                    :to="{ name: 'sw.product.detail.prices', params: { id: $route.params.id } }"
                    class="sw-card__quick-link"
                >
                    {{ $tc('sw-product.detailBase.linkAdvancedPrices') }}
                    <mt-icon
                        name="regular-long-arrow-right"
                        size="16px"
                    />
                </router-link>
            </sw-container>
            {% endblock %}

        </mt-card>
        {% endblock %}

        <template v-if="productStates.includes('is-download')">
            {% block sw_product_detail_deliverability_downloadable_info_card %}
            <mt-card
                v-show="showProductCard('deliverability')"
                class="sw-product-detail-base__deliverability-downloadable"
                position-identifier="sw-product-detail-base-deliverability-downloadable"
                :title="$tc('sw-product.detailBase.cardTitleDeliverabilityInfo')"
            >
                {% block sw_product_detail_deliverability_downloadable_info_form %}
                <sw-product-deliverability-downloadable-form :disabled="!acl.can('product.editor')" />
                {% endblock %}
            </mt-card>
            {% endblock %}
        </template>

        <template v-else>
            {% block sw_product_detail_deliverability_info_card %}
            <mt-card
                v-show="showProductCard('deliverability')"
                class="sw-product-detail-base__deliverability"
                position-identifier="sw-product-detail-base-deliverability"
                :title="$tc('sw-product.detailBase.cardTitleDeliverabilityInfo')"
            >
                {% block sw_product_detail_deliverability_info_form %}
                <sw-product-deliverability-form :allow-edit="acl.can('product.editor')" />
                {% endblock %}
            </mt-card>
            {% endblock %}
        </template>

        {% block sw_product_detail_base_category_card %}
        <mt-card
            v-show="showProductCard('visibility_structure')"
            class="sw-product-detail-base__visibility-structure"
            position-identifier="sw-product-detail-base-visibility-structure"
            :title="$tc('sw-product.detailBase.cardTitleAssignment')"
            :is-loading="loading.product"
        >

            {% block sw_product_detail_base_category_form %}
            <sw-product-category-form :allow-edit="acl.can('product.editor')" />
            {% endblock %}

        </mt-card>
        {% endblock %}

        {% block sw_product_detail_base_media %}
        <sw-inherit-wrapper
            v-show="showProductCard('media')"
            ref="productMediaInheritance"
            v-model:value="product.media"
            class="sw-product-detail-base__media"
            :inherited-value="parentProduct.media"
            :custom-restore-inheritance-function="mediaRestoreInheritanceFunction"
            :custom-remove-inheritance-function="mediaRemoveInheritanceFunction"
            is-association
        >
            <template #content="{ isInherited, isInheritField, restoreInheritance, removeInheritance }">

                {% block sw_product_detail_base_media_card %}
                <mt-card
                    :subtitle="$tc('sw-product.detailBase.cardSubtitleMedia')"
                    :is-loading="loading.product || loading.customFieldSets || loading.media"
                    :class="{ 'sw-card__inherited': isInherited }"
                    position-identifier="sw-product-detail-base-media"
                >
                    <template #title>

                        {% block sw_product_detail_base_media_card_title %}
                        <div
                            class="sw-card__title"
                            :class="{ 'sw-card__title__inherited': isInherited }"
                        >
                            <sw-inheritance-switch
                                v-if="isInheritField"
                                class="sw-inherit-wrapper__inheritance-icon"
                                :is-inherited="isInherited"
                                @inheritance-restore="restoreInheritance"
                                @inheritance-remove="removeInheritance"
                            />
                            {# TODO: headline is not clickable yet #}
                            {{ $tc('sw-product.detailBase.cardTitleMedia') }}
                        </div>
                        {% endblock %}

                    </template>

                    {% block sw_product_detail_base_media_card_form %}
                    <sw-product-media-form
                        v-if="mediaFormVisible"
                        :key="isInherited"
                        :product-id="isInherited ? parentProduct.id : product.id"
                        :is-inherited="isInherited"
                        :disabled="isInherited || !acl.can('product.editor')"
                        @media-open="onOpenMediaModal"
                    />
                    {% endblock %}

                </mt-card>
                {% endblock %}

            </template>
        </sw-inherit-wrapper>
        {% endblock %}

        {% block sw_product_detail_base_media_modal %}
        <sw-media-modal-v2
            v-if="showMediaModal"
            :initial-folder-id="mediaDefaultFolderId"
            :entity-context="product.getEntityName()"
            @media-modal-selection-change="onAddMedia"
            @modal-close="onCloseMediaModal"
        />
        {% endblock %}

        {% block sw_product_detail_base_settings_card %}
        <mt-card
            v-show="showProductCard('labelling')"
            class="sw-product-detail-base__labelling-card"
            position-identifier="sw-product-detail-base-labelling"
            :title="$tc('sw-product.detailBase.cardTitleSettings')"
            :is-loading="loading.product"
        >

            {% block sw_product_detail_base_settings_form %}
            <sw-product-settings-form :allow-edit="acl.can('product.editor')" />
            {% endblock %}

        </mt-card>
        {% endblock %}

    </template>
</div>
{% endblock %}
